﻿<link href="/Modules/NineSeas.Dashboard/Styles/edit-book.css" rel="stylesheet" type="text/css"/>
<div ng-controller="EditBookController" class="post-body">
    <div class="post-body-content">
        <fieldset>
            <legend>All of the following fields are required.</legend>
            <div class="form-group">
                <label style="display: block;">
                    Name
                    <input type="text" class="form-control" placeholder="Enter the name of the book here..." data-ng-model="book.Name" data-ng-keyup="nameKeyUp()" />
                </label>
            </div>
            <div class="form-group">
                <label style="display: block;">
                    Url Name
                    <input type="text" class="form-control" placeholder="Enter the URL - friendly name of the book here..." ng-model="book.NameOnUrl" />
                </label>
            </div>
            <div class="form-group">
                <label style="display: block;">
                    Introduction
                    <textarea class="form-control" data-ui-tinymce="tinymceOptions" data-ng-model="book.Introduction" rows="10"></textarea>
                </label>
            </div>
        </fieldset>
        <div class="panel panel-simple">
            <h1 class="panel-title">Save and publish</h1>
            <div class="subpanel" style="width: 245px;">
                <div class="legend"><strong>How do you want to save? {{publish.type}}</strong></div>
                <div>
                    <label class="checkbox">
                        <input type="radio" data-ng-model="publish.type" value="SaveDraft" />
                        <i>Save Draft</i>
                    </label>
                </div>
                <div>
                    <label class="checkbox">
                        <input type="radio" data-ng-model="publish.type" value="PublishNow" />
                        <i>Publish Now</i>
                    </label>
                </div>
                <div>
                    <label class="checkbox">
                        <input type="radio" data-ng-model="publish.type" value="PublishLater" />
                        <i>Publish Later</i>
                    </label>
                    <div ng-show="publish.type == 'PublishLater'" style="margin-left: 30px;">
                        Select date and time
                        <div class="form-horizontal">
                            <input type="text" class="input-medium" 
                                   data-datepicker-popup="dd-MM-yyyy" 
                                   data-ng-model="publish.date" 
                                   data-min="publish.min" 
                                   data-open="publish.opened" 
                                   data-datepicker-options="publish.options" 
                                   data-ng-required="true" 
                                   readonly="readonly" />
                            <button class="btn btn-info" data-ng-click="publish.open()"><i class="glyphicon glyphicon-calendar"></i></button>
                            <timepicker data-ng-model="publish.date" data-hour-step="1" data-minute-step="15" data-show-meridian="true"></timepicker>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subpanel" style="width: 245px;">
                <div class="legend"><strong>If the save is success, what do you want to do next?</strong></div>
                <div>
                    <label class="checkbox">
                        <input type="radio" ng-model="afterSavingAction" value="stay" />
                        <i>Stay</i>
                    </label>
                </div>
                <div>
                    <label class="checkbox">
                        <input type="radio" ng-model="afterSavingAction" value="chapter" />
                        <i>Edit first chapter</i>
                    </label>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="panel panel-simple" ng-show="book.VersionRecord">
            <h1 class="panel-title">Versioning information</h1>
            <dl class="dl-horizontal">
                <dt style="font-weight: normal;">Version number:</dt>
                <dd><span class="label label-info">{{book.VersionRecord.Number}}</span></dd>
                <dt style="font-weight: normal;">Published</dt>
                <dd><span ng-show="book.VersionRecord.Published" class="label label-success"><i class="glyphicon glyphicon-ok"></i></span><span ng-hide="book.VersionRecord.Published" class="label label-important"><i class="icon-ban-circle"></i></span></dd>
                <dt style="font-weight: normal;">Is Latest</dt>
                <dd><span ng-show="book.VersionRecord.Latest" class="label label-success"><i class="glyphicon glyphicon-ok"></i></span><span ng-hide="book.VersionRecord.Latest" class="label label-important"><i class="icon-ban-circle"></i></span></dd>
            </dl>
        </div>
        <button class="btn btn-success" ng-click="save()">Save</button>
        <a class="btn btn-info" ng-show="book.Id" ng-href="/dashboard/book/{{book.Id}}/chapter">Chapters</a>
    </div>
    <div class="post-body-aside">
        <div class="panel panel-simple">
            <h1 class="panel-title">Book cover</h1>
            <div class="panel-legend">Click on the image to open the File Upload dialog.</div>
            <a href="javascript:;" class="image-container">
                <img ng-src="{{book.ImageUrl || '/Modules/NineSeas/Images/placeholder-book.png'}}" alt="{{book.Name}}" class="book-cover-full"/>
                <div class="image-overlay">Click to start uploading</div>
            </a>
        </div>
        <div class="panel panel-simple">
            <h1 class="panel-title">Category</h1>
            <div class="categories-selected">
                <span ng-repeat="category in book.selectedCategories" data-id="{{category.Id}}">{{category.Name}} <a ng-click="deselectCategory(category)">x</a></span>
            </div>
            <div class="popup-panel" ng-show="categoryPanel.display">
                <div class="overlay" ng-click="categoryPanel.toggle()"></div>
                <div class="horizon">
                    <div class="panel-content categories-all">
                        <a class="close" ng-click="categoryPanel.toggle()"><i class="glyphicon glyphicon-remove"></i></a>
                        <div>
                            <span ng-repeat="category in categories" data-id="{{category.Id}}" 
                                ng-class="{true:'selected', false:''}[category.selected]"
                                ng-click="selectCategory(category)">{{category.Name}}</span>                        
                        </div>
                    </div>
                </div>                
            </div>
            <div style="clear: both"></div>
            <button class="btn btn-info" ng-click="categoryPanel.toggle()">Add</button>
        </div>
        <div class="panel panel-simple">
            <h1 class="panel-title">Tags</h1>
            <div class="tags">
                <span ng-repeat="tag in book.Tags"><i class="glyphicon glyphicon-tag"></i> {{tag}} <a ng-click="removeTagIndex($index)" href="javascript:;"><i class="glyphicon glyphicon-remove"></i></a></span>
            </div>
            <div style="clear: both"></div>
            <div class="input-append" style="margin-top: 10px;">
              <input class="span2" type="text" placeholder="Enter a new tag..." ng-model="newTag" typeahead="tag for tag in tags | filter:$viewValue | limitTo:8"/>
                <button class="btn btn-info" ng-click="addTag()">Add</button>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>